<template>
    <div>
        <!-- 父亲 -->
        <ParentChild :text="parent"></ParentChild>
        <!-- 子父 -->
        <ChildParent @ChildBtn='ParentBtn'></ChildParent><br>
        {{child}} <br>
        <!-- 兄弟 -->
        <BigBrother></BigBrother><br>
        <YuongerBrother></YuongerBrother>
        <!-- 插槽 -->
        <Insert>
            <div slot='top'>我在上面出来了</div>
            <div slot='bottom'>我在下面出来了</div>
        </Insert>
        <Sync :context.sync='context'></Sync>
        <Content >
            <template slot-scope="data">
                {{data.student}}
            </template>
        </Content>
    </div>
</template>

<script>
export default {
    data () {
        return {
            parent:'我是父亲,我要传东西给我的孩子',
            child:'',
            context:'我没有被改变'
        }
    },
    methods: {
        ParentBtn(params){
            this.child=params
        }
    },
    components: {
        // 父子传参
        ParentChild:{
            props:['text'],
            template:'<div>{{text}}</div>',
            mounted () {
                console.log(this.text)
                
            }
        },
        // 子父传参
        ChildParent:{
            template:'<button @click="btn">点我</button>',
            methods: {
                btn(){
                    // 绑定事件
                    this.$emit('ChildBtn','我也要给我父亲送些东西')
                }
            }
        },
        // 兄弟传参
        BigBrother:{
            template:'<button @click="Big">点大哥</button>',
            methods: {
                Big(){
                    this.$bus.$emit('Big','赏小弟些钱花花')
                }
            }
        },
        YuongerBrother:{
            template:'<button>小弟</button>',
            created(){
                this.$bus.$on('Big',(params)=>{
                    console.log(params)
                })
            }
        },
        Insert:{
            
            template:'<div><slot name="top"></slot></br><slot name="bottom"></slot></div>'
        },
        Sync:{
            props:['context'],
            template:'<div>{{context}}<button @click="change">点击改变</button></div>',
            methods: {
                change(){
                    this.$emit('update:context','我被改变了')
                }
            }
        },
        Content:{
            data () {
                return {
                    student:'卡卡罗特'
                }
            },
            template:'<div><slot :student="student"></slot></div>'
        }
    }
}
</script>

<style>

</style>